<template>
  <div class="suggestion">
    <van-nav-bar title="举报" left-arrow @click-left="$router.history.go(-1)">
      <span slot='left' class="topleftIcon"><img src='../../../public/images/qt_75.png'/></span>
    </van-nav-bar>
    <div class="b_line ml-30 mr-30"></div>
    <p class="ml-30 mr-30 txt">请选择举报原因</p>
    <ul class="reason ml-30 mr-30 flex_between flex-wrap">
      <li :class='reasonIndex==index? "active" : ""' v-for='(item,index) in reasonList' :key='index' @click='reasonIndex=index'>{{item}}</li>
    </ul>
    <textarea placeholder="原因描述" v-model='reason'></textarea>
    <p class="ml-30 mr-30 txt">上传凭证</p>
    <!-- <div class="pic pl-30">
      <div class="addPic"><img src="../../../public/images/addPic.png"/></div>
    </div> -->
    <div class="pic ml-30 addPic flex flex-wrap">
      <img v-for="(item,index) in info.image" :key="index" :src="item" />
      <td-upload @upload-img="headPortrait"></td-upload>
    </div>
    <van-button class="mt-30 ml-30 mr-30" type="primary" size="large" @click='releaseBtn'>提交</van-button>
  </div>
</template>

<script>
export default {
  data(){
    return{
      checked:true,
      reasonList:['出售禁售品','假冒伪劣','疑似欺诈','人身攻击','泄露隐私','垃圾广告'],
      reasonIndex:0,
      info:{
        toUserId:this.$route.query.toUserId,
        image:[]
      },
      reason:'',
    }
  },
  methods:{
    headPortrait(e) {
      this.info.image.push(e);
    },
    releaseBtn(){
      let that=this;
      console.log(this.info)
      if (!this.reason) {
        this.$toast.fail("请输入问题描述");
        return;
      }
      if (this.info.image.length==0) {
        this.$toast.fail("请上传商品图片");
        return;
      }
      this.info.images=JSON.stringify(this.info.image);
      this.info.content=JSON.stringify({content:this.reasonList[this.reasonIndex],reason:this.reason});
      this.$post(this.$api.user.report,this.info).then(data => {
        this.$toast.success({message:"提交成功",duration:500,onClose:function(){
          that.$router.history.go(-1);
        }});
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .forms{background-color: #fff;}
  .forms .name{width: 1rem;height: 0.6rem;border-radius: 0.29rem;font: 0.28rem/0.6rem '微软雅黑';text-align: center;background-color: #F5F5F5;margin-right: 0.3rem;}
  .forms input[type=text]{border: none;outline: none;color: #CCCCCC;font: 0.3rem/0.9rem '微软雅黑';display: block;text-indent: 0.1rem;width: 100%;}
  .leftLine{position: relative;}
  .leftLine::before{content: '';width: 0.04rem;height: 0.4rem;background-color: #4AACE9;position: absolute;left: 0.3rem;top: 0.65rem;}
  textarea{font: 0.3rem/0.4rem '微软雅黑';color: #CCCCCC;border: none;outline: none;height: 2rem;padding: 0.43rem;width:calc(100vw - 0.86rem);display:block;}
  .pic{background-color: #fff;}
  .addPic {
    /* height: 1.8rem; */
  }
  .addPic img {
    width: calc((100vw - 0.6rem - 0.2rem)/3);
    height: calc((100vw - 0.6rem - 0.2rem)/3);
    display: inline-block;
    /* margin-right: 0.2rem; */
    margin-right: 0.1rem;
    margin-bottom: 0.1rem;
  }
  .addPic img:nth-of-type(3n){
    margin-right: 0;
  }
  input::-webkit-input-placeholder,textarea::-webkit-input-placeholder { /* WebKit browsers */
    color: #CCCCCC;
    font-size: 0.32rem;
  }

  input::-moz-placeholder,textarea::-webkit-input-placeholder { /* Mozilla Firefox 19+ */
    color: #CCCCCC;
    font-size: 0.32rem;
  }

  input::-ms-input-placeholder,textarea::-webkit-input-placeholder { /* Internet Explorer 10+ */
    color: #CCCCCC;
    font-size: 0.32rem;
  }   
  .txt{font-size:0.32rem;line-height: 0.92rem;color: #ccc;}
  .reason li{width: 3.3rem;height: 0.74rem;border-radius: 0.1rem;font-size: 0.32rem;line-height: 0.74rem;color: #333;text-align: center;background-color: #EAEAEA;margin-bottom: 0.25rem;}
  .reason .active{color:#4AACE9;}
</style>
